<template>
	<view class="content">
		<view class="swiper">
			<view class="title"> 您将切换至{{userType==0?'雇主':'雇员'}}身份 </view>
			<view class="tip"> 为了确认您对将要切换的身份是否了解，请回答以下问题 </view>
			<view class="">
				<view class="" v-for="(item,i) in list" :key="i">
					<view class="timu">
						{{i+1}},{{item.content}}
					</view>
					<view class="anser">
						<view class="" v-for="(t,d) in item.quest" :key="d">
							<view class="card" @click="changAnser($event,item.id)" :data-index="t.id">
								<view class="">
									{{t.content}}
								</view>
								<view :class="t.checked?'active':'deft'">
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view :class="['btn', isAll? 'active1':'active2']" @click="onBtn"> 提交答案 </view>
		</view>
		<bullMosk v-if="isShowMosk" @onclose='onclose' @getRest='getRest' :isOk='isOk' :typeUser='typeUser'></bullMosk>
		<maskMake @close='close' v-if="isShowMosk2">
			<view>
				{{msg}}
			</view>
		</maskMake>
	</view>
</template>
<script>
	import bullMosk from './com/bullMost.vue'
	import maskMake from './com/maskMake.vue'
	export default {
		components: {
			bullMosk,
			maskMake
		},
		data() {
			return {
				userType: 0,
				list: [],
				isShowMosk: false,
				id: '',
				isOk: false,
				code: '', //是否及格的分数
				msg: '',
				isShowMosk2: false,
				typeUser: ''
			}
		},
		computed: {
			isAll() {
				let list = this.makeNum()
				let finnish = list.every(item => {
					return item.answers.length > 0
				})
				return finnish
			}
		},
		methods: {
			close() {
				this.isShowMosk2 = false
				let userType = uni.getStorageSync('userType'); //用户类型0 雇员，1雇主
				if (userType == 1) {
					uni.redirectTo({
						url: '/pages/my/newMy'
					})
				} else {
					uni.redirectTo({
						url: '/pages/system-set/employee-set'
					})
				}
			},
			// 关闭
			onclose() {
				let userType = uni.getStorageSync('userType'); //用户类型0 雇员，1雇主
				if (userType == 1) {
					uni.redirectTo({
						url: '/pages/my/newMy'
					})
				} else {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
				this.isShowMosk = false
				this.getList()
			},
			// 重新答题
			getRest() {
				this.isShowMosk = false
				this.getList()
			},
			// 获取答题列表
			async getList() {
				uni.showLoading({
					title: '题目加载中'
				})
				let res = await this.$fetch(this.$api.createPaperZlg, {}, 'POST', 'JSON')
				if (res.code) {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
				uni.hideLoading()
				try {
					// 单选题列表  radioList;
					// 多选题列表   multiList;
					// 判断题     judgeList
					let {
						radioList,
						multiList,
						judgeList,
						id,
					} = res.data
					this.id = id
					let list = [...radioList, ...multiList, ...judgeList]
					list.forEach((item, index) => {
						if (item.quType == 1) {
							item['content'] = `${item.detailDto.content}(单选)`
						} else if (item.quType == 2) {
							item['content'] = `${item.detailDto.content}(多选)`
						} else {
							item['content'] = `${item.detailDto.content}(判断)`
						}
						item['quest'] = item.detailDto.answerList
						item['quest'].forEach(t => {
							t['content'] = t.content
							t['checked'] = t.checked
						})
					})
					this.list = list
				} catch (e) {
					console.log(e)
				}
			},
			changAnser(e, l) {
				let id = e.currentTarget.dataset.index
				this.list.forEach((item, index) => {
					item.quest.forEach((v, i) => {
						if (item.quType == 2) { //多选
							if (item.id == l) {
								if (id == v.id) {
									v.checked = !v.checked
								}
							}
						} else { //单选判断
							if (item.id == l) {
								if (id == v.id) {
									v.checked = true
								} else {
									v.checked = false
								}
							}
						}
					})
				})
			},
			// 数据处理
			makeNum() {
				let data = this.list.map(item => {
					let answersId = []
					item.detailDto.answerList.forEach(e => {
						if (e.checked) {
							answersId.push(e.id)
						}
					})
					return {
						paperId: item.paperId, //试卷id 
						quId: item.quId, //题目id
						answer: '', //用户答案
						answers: answersId, //用户答案
					}
				})
				return data
			},
			async onBtn() {
				let isTrue = this.makeNum().every(item => {
					return item.answers.length > 0
				})
				if (!isTrue) {
					uni.showToast({
						title: '请完成全部题目',
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					title: '验证中...'
				})
				let data = this.makeNum()
				let res = await this.$fetch(this.$api.filAnswerZlg, {
					id: this.id,
					userId: '',
					paperAnswerList: data
				}, 'POST', 'JSON')
				uni.hideLoading()
				this.isOk = res.data >= this.code
				// 调用切换身份
				if (this.isOk) {
					let e = (this.userType == 1 && '0') || (this.userType == 0 && '1')
					this.changUp(e)
				} else {
					this.isShowMosk = true
				}
			},
			// 切换身份
			async changUp(e) {
				let res = await this.$fetch(this.$api.updUserType, {
					type: e
				}, 'POST')
				if (res.code) {
					this.msg = res.msg
					this.isShowMosk2 = true
					return
				}
				this.typeUser = e
				this.isShowMosk = true
			},
			// 获取答题分数线
			async getCode() {
				let res = await this.$fetch(this.$api.property_list_by_type_and_key, {
					type: 1,
					key: 'exam_pass_score'
				}, 'POST')
				this.code = res.data
			},
		},
		onLoad() {
			this.getCode()
			this.userType = uni.getStorageSync('userInfo').userType
			this.getList()
		},
		onShareAppMessage() {
			if (uni.getStorageSync('userType') == 1) {
				return {
					title: "足不出户，免费招工",
					desc: "线上招募零工，工价透明，免费使用",
					path: `/pages/start-n/start-n`,
					imageUrl: 'https://images.linglinggong.net/static/employer-share.jpg',
					success: res => {}
				}
			} else {
				return {
					title: "在家找日结兼职，工种齐全",
					desc: "免费使用，提前在家找日结兼职",
					path: `/pages/start-n/start-n`,
					imageUrl: 'https://images.linglinggong.net/static/employee-share.jpg',
					success: res => {}
				}
			}
		},
	}
</script>
<style lang="scss" scoped>
	.content {
		background: #fff;
		width: 100vw;
		height: 100vh;
		overflow-y: scroll;

		.swiper {
			width: 704rpx;
			margin: 0 auto;

			.title {
				margin-top: 50rpx;
				font-size: 36rpx;
				font-weight: 800;
				color: #515151;
			}

			.tip {
				font-size: 28rpx;
				font-weight: bold;
				color: #FE4538;
				margin-top: 4rpx;
			}

			&>view:nth-child(3) {
				margin-top: 10rpx;
			}

			.timu {
				font-size: 32rpx;
				font-weight: 400;
				color: #1A1A1A;
				margin: 40rpx 0 30rpx;
			}

			.anser {
				.card {
					width: 694rpx;
					padding: 38rpx 0;
					background: #F1F1F5;
					margin-bottom: 20rpx;
					border-radius: 12rpx;
					display: flex;
					align-items: center;

					&>view:nth-child(1) {
						font-size: 32rpx;
						font-weight: bold;
						color: #1A1A1A;
						margin-left: 20rpx;
						max-width: 600rpx;
					}

					&>view:nth-child(2) {
						margin: 0 24rpx 0 auto;
						border-radius: 50%;
						flex-shrink: 0;
					}

					.deft {
						width: 28rpx;
						height: 28rpx;
						background: #FFF;
						border-radius: 50%;
					}

					.active {
						width: 36rpx;
						height: 36rpx;
						border: 4rpx solid #FCC928;
						display: flex;
						justify-content: center;
						align-items: center;
					}

					.active::after {
						content: '';
						width: 20rpx;
						height: 20rpx;
						background: #FCC928;
						box-shadow: 0rpx 2rpx 6rpx 2rpx rgba(252, 201, 40, 0.3);
						border-radius: 50%;
					}
				}
			}
		}
	}

	.btn {
		width: 694rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		font-weight: bold;
		border-radius: 12rpx;
		margin: 60rpx 0 30rpx;
	}

	.active1 {
		color: #333333;
		box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(255, 133, 29, 0.3);
		background: #FCC928;
	}

	.active2 {
		color: #FFFFFF;
		background: #A5A5A5;
	}
</style>